<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <input type="button" value="绑定事件按钮2" id="bn_2">
    <input type="button" value="解绑按钮2" id="unbind_2">

    <script>

        function my$(id) {
            return document.getElementById(id);
        }

        //为任意的一个元素,解绑对应的事件
        function removeEventListener(element, type, fnName) {
            if (element.removeEventListener) {
                element.removeEventListener(type, fnName, false);
            } else if (element.detachEvent) {
                element.detachEvent("on" + type, fnName);
            } else {
                element["on" + type] = null;
            }
        }

        function f1() {
            alert("绑定事件2-1");
        }


        function f2() {
            alert("绑定事件2-2");
        }


        my$("bn_2").addEventListener("click", f1, false);
        my$("bn_2").addEventListener("click", f2, false);



        my$("unbind_2").onclick = function () {
            removeEventListener(my$("bn_2"), "click", f1);
            removeEventListener(my$("bn_2"), "click", f2);
        }


    </script>
</body>

</html>